<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>集装箱操作</title>
    <!--字体图标-->
    <link href="http://cdn.javaex.cn/javaex/pc/css/icomoon.css" rel="stylesheet" />
    <!--动画-->
    <link href="http://cdn.javaex.cn/javaex/pc/css/animate.css" rel="stylesheet" />
    <!--骨架样式-->
    <link href="http://cdn.javaex.cn/javaex/pc/css/common.css" rel="stylesheet" />
    <!--皮肤（缇娜）-->
    <link href="http://cdn.javaex.cn/javaex/pc/css/skin/tina.css" rel="stylesheet" />
    <!--jquery，不可修改版本-->
    <script src="http://cdn.javaex.cn/javaex/pc/lib/jquery-1.7.2.min.js"></script>
    <!--全局动态修改-->
    <script src="http://cdn.javaex.cn/javaex/pc/js/common.js"></script>
    <!--核心组件-->
    <script src="http://cdn.javaex.cn/javaex/pc/js/javaex.min.js"></script>
    <!--表单验证-->
    <script src="http://cdn.javaex.cn/javaex/pc/js/javaex-formVerify.js"></script>
</head>
<style>
    body{background-color: #fff;}
    .login-form{background: #fff;margin:40px;}
    .login-title{font-size: 20px;text-align: center;margin-bottom: 25px;}
    .login-item{display: flex;margin-bottom: 14px;}
    .login-link{margin-bottom: 14px;}
    .login-link label, .login-link a{color: #9B9B9C;}
    .login-link a{font-size: 14px;}
    .login-text{min-height: 40px;width: 100%;color: #B3B3B3;font-size: 14px;border: 1px solid #EEEFF0;border-radius: 3px;font-family: Helvetica, "microsoft yahei", sans-serif;padding-left: 16px;outline: none;}
    .button.login{background-color: rgba(64, 65, 61, 0.9);color: white;width: 90%;border-radius: 3px;font-size: 14px;height: 40px;line-height: 40px;}
    .login-link .line{display: inline-block;width: 1px;height: 12px;background-color: #EEEEEE;margin: 0 6px;}
</style>
<body>

<div class="login-form">
    <form id="form" action="addRoute" method="get">
        <div class="login-title">添加</div>


        <div class="login-item">
           航线名：<input type="text" class="login-text" name="rname" data-type="必填"/>
        </div>
        <div class="login-item">
            起始地：<input type="text" class="login-text" name="splace" data-type="必填"/>
        </div>

        <div class="login-item">
            目的地：<input type="text" class="login-text" name="aplace" data-type="必填"/>
        </div>
        <div class="login-item">
            总航程：<input type="text" class="login-text" name="voyage"  data-type="必填"/>
        </div>
        <div class="login-item">
            总价格：<input type="text" class="login-text" name="price" data-type="必填"/>
        </div>
        <div class="login-item">
            出发时间：<input type="text" id="date3" name="times" class="ex-date" style="width: 200px;" value="" readonly/>
        </div>
        <div class="login-item">
            航线组：<select id="rgid"  name="rgid">

                        <option th:each="route : ${rg}" th:value="${route.rgid}" th:text="${route.rgname}">
                        </option>

                    </select>
        </div>
        <div class="login-item">
            船：<select id="sid"  name="sid">

                <option  th:each="boat : ${be}" th:value="${boat.sid}" th:text=" ${boat.sname}">
                </option>

            </select>
        </div>


         <div class="login-item">
            <input type="button" id="submit" class="button login" value="添 加" />
        </div>

    </form>
</div>
</body>
<script>
    // 监听点击保存按钮事件
    //添加
    $("#submit").click(function() {
        // 表单验证函数
        if (javaexVerify()) {
            // 返回错误信息时，可以添加自定义异常提示。参数为元素id和提示
            // addErrorMsg("username", "用户名不存在");
            // 提交
            //$("#form").submit();

            $.ajax({
                url:"addRoute",
                data:$("form").serializeArray(),
                type:"post",
                success:function(result){
                    if(result == '0000'){

                        alert("添加成功！");
                        parent.javaex.close();

                        // 刷新页面
                        parent.location.reload();

                    } else if(result == '0001'){
                        alert("添加失败");
                    }
                }
            });




        } else {
            return false;
        }
    });


    javaex.select({
        id : "rgid",
        isSearch : true,
        // 回调函数
        callback: function (rtn) {
            console.log("selectValue:" + rtn.selectValue);
            console.log("selectName:" + rtn.selectName);
        }
    });

    javaex.select({
        id : "sid",
        isSearch : true,
        // 回调函数
        callback: function (rtn) {
            console.log("selectValue:" + rtn.selectValue);
            console.log("selectName:" + rtn.selectName);
        }
    });



    javaex.date({
        id : "date3",	// 承载日期组件的id
        type : "yyyy-MM-dd HH:mm:ss",	// 控件类型
        date : "2019-12-13 09:00:00",	// 选择的日期
        // 重新选择日期之后返回一个时间对象
        callback : function(rtn) {

        }
    });


</script>
</html>